<template>
<div class="mycontainer">
  <mu-appbar style="width: 100%;text-align: left" color="primary">
    <span >个人资料</span>
    <mu-button flat slot="right">你好，{{user_info.nickname}}！</mu-button>
  </mu-appbar>
  <div style="clear:both;height: 15px"></div>
  <mu-container>
    <mu-row gutter>
      <mu-col span="12">
        <mu-card style="width: 100%; max-width: 375px; margin: 0 auto;">
          <div>
            <h3 style="padding-top: 15px">个人资料</h3>
          </div>
          <mu-card-text>
            <mu-form :model="user_info" class="mu-demo-form" label-position="right"  label-width="100">
              <mu-form-item prop="input" label="用户ID：">
                <mu-text-field v-model="user_info.id" disabled></mu-text-field>
              </mu-form-item>
              <mu-form-item  label="昵称：">
                <mu-text-field v-model="user_info.nickname" disabled></mu-text-field>
              </mu-form-item>
            </mu-form>
          </mu-card-text>
        </mu-card>
        <mu-card style="width: 100%; max-width: 375px;">
         <div>
            <h3 style="padding-top: 15px">我的模型</h3>
         </div>
          <mu-card-text>
            <mu-form :model="model_info" class="mu-demo-form" label-position="right"  label-width="100">
              <mu-form-item prop="input" label="模型类型">
                <mu-text-field v-model="model_info.model_type" disabled></mu-text-field>
              </mu-form-item>
              <mu-form-item  label="模型结构">
                <mu-text-field v-model="model_info.model_struct" disabled></mu-text-field>
              </mu-form-item>
              <mu-form-item  label="激活函数">
                <mu-text-field v-model="model_info.activation" disabled></mu-text-field>
              </mu-form-item>
            </mu-form>
          </mu-card-text>
          <mu-card-actions>
            <mu-button @click="toModelTest" color="primary">点击测试模型</mu-button>
          </mu-card-actions>
        </mu-card>

        <div style="clear:both;height: 15px"></div>

        <mu-paper >
          <mu-list>
            <mu-list-item>
              <mu-list-item-action>
                <mu-icon value="power_settings_new"></mu-icon>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-list-item-title>注销登录</mu-list-item-title>
              </mu-list-item-content>
            </mu-list-item>
          </mu-list>
        </mu-paper>
      </mu-col>
    </mu-row>
  </mu-container>
  <mu-container class="bottomNav">
    <mu-bottom-nav value="4">
      <mu-bottom-nav-item value="1" title="猫狗识别" to="/main" icon="restore"></mu-bottom-nav-item>
      <mu-bottom-nav-item value="2" title="项目实战" to="/practice" icon="edit"></mu-bottom-nav-item>
      <mu-bottom-nav-item value="3" title="模型测试" to="/evalmodel" icon="explore"></mu-bottom-nav-item>
      <mu-bottom-nav-item value="4" title="个人资料" to="/mymodel" icon="person"></mu-bottom-nav-item>
    </mu-bottom-nav>
  </mu-container>
</div>
</template>

<script>
import * as tf from "@tensorflow/tfjs";
const axios = require('axios');
export default {
  name: "MyModel",
  data(){
    return{
      user_info: {
        nickname:"",
        id:""
      },
      model_info:{
        model_struct:"",
        model_type:"",
        activation:""
      }
    }
  },
  methods:{
    toModelTest(){
      this.$router.push({path:"/evalmodel"})
    }
  },
  mounted() {
    var _this=this
    getInfoAndModel();
    async function getInfoAndModel(){
      await axios.get("http://192.168.31.103:2444/LoginCenter/getUserInfo").then(function(res){
        console.log(res)
        _this.$data.user_info.id=res.data.user_id;
        _this.$data.user_info.nickname=res.data.nickname;
      });
      axios.get("http://192.168.31.103:2444/192.168.31.103/getMyModelInfo").then(function(res){
        console.log(res)
        _this.$data.model_info.model_struct=res.data.model_struct;
        _this.$data.model_info.model_type=res.data.model_type;
        _this.$data.model_info.activation=res.data.activation
      });
  }
  }
}
</script>

<style>
.mycontainer{
  overflow-y: scroll;
}
</style>
